<template>
	<u-modal :show="show" :negativeTop="200" :title="title" confirmText="确定" showCancelButton confirmColor="#FD8906"
		cancelColor="#000" @confirm="save" @cancel="show = false" @close="show = false" zoom>
		<view class="f-1 w100 f14">
			<view class="p-10-0 f-bt f-y-c">
				<view class="left c9 f-g-0 mr10">排序</view>
				<view class="f-g-1">
					<u--input placeholder="请输入排序" :customStyl="{background:'#f3f3f3'}" v-model="form.sort">
					</u--input>
				</view>
			</view>
			<view class="p-10-0 f-bt f-y-c">
				<view class="left c9 f-g-0 mr10"><text class="crb">*</text>加料名称</view>
				<view class="f-g-1">
					<u--input placeholder="请输入加料名称" :customStyl="{background:'#f3f3f3'}" v-model="form.name">
					</u--input>
				</view>
			</view>
			<view class="p-10-0 f-bt f-y-c">
				<view class="left c9 f-g-0 mr10">所属分类</view>
				<view class="f-g-1">
					<uni-data-select v-model="form.catId" :localdata="labelList"
						placeholder="请选择所属分类"></uni-data-select>
				</view>
			</view>
			<view class="p-10-0 f-bt f-y-c">
				<view class="left c9 f-g-0 mr10">加料图片</view>
				<view class="f-g-1">
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" uploadIcon="plus"
						name="1" :maxCount="1"></u-upload>
				</view>
			</view>
			<view class="p-10-0 f-bt f-y-c">
				<view class="left c9 f-g-0 mr10">初始价格</view>
				<view class="f-g-1">
					<u--input placeholder="请输入初始价格" :customStyl="{background:'#f3f3f3'}" v-model="form.price">
					</u--input>
				</view>
			</view>
			<view class="p-10-0 f-bt f-y-c">
				<view class="left c9 f-g-0 mr10">初始库存</view>
				<view class="f-g-1">
					<u--input placeholder="请输入初始库存" :customStyl="{background:'#f3f3f3'}" v-model="form.inventory">
					</u--input>
				</view>
			</view>
			<view class="p-10-0 f-bt f-y-c">
				<view class="left c9 f-g-0 mr10">次日置满</view>
				<view class="f-g-1">
					<u-switch v-model="form.autoReplenish" :inactiveValue="0" :activeValue="1" :activeColor="subColor"
						size="20">
					</u-switch>
				</view>
			</view>
		</view>
	</u-modal>
</template>

<script>
	import {
		mapState,
	} from 'vuex'
	import site from '@/custom/siteroot.js';
	import config from '@/custom/config.js';
	export default {
		components: {

		},
		props: {
			mode: {
				type: String,
				default: () => 'single'
			},
			v: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				subColor: uni.getStorageSync('subject_color'),
				form: {
					sort: 1,
					name: '',
					catId: '',
					image: '',
					price: '',
					inventory: '',
					autoReplenish: 1,
				},
				fileList1: [],
				labelList: [],
				show: false,
			}
		},
		computed: {
			...mapState({
				storeId: state => state.storeId,
			}),
		},
		methods: {
			open(v) {
				if (v && v.id) {
					this.title = '编辑加料'
					this.form = JSON.parse(JSON.stringify(v))
					if (this.form && this.form.image) {
						this.fileList1 = []
						this.fileList1.push({
							url: this.form.image
						})
					}
				} else {
					this.title = '新增加料'
					this.form = {
						sort: 1,
						name: '',
						catId: '',
						image: '',
						price: '',
						inventory: '',
						autoReplenish: 1,
					}
					this.fileList1 = []
				}
				this.show = true
				this.getGoodsLabelList()
			},
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			async afterRead(event) {
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: `${uni.getStorageSync('siteroot')}/channel/file/upload`,
						filePath: url,
						name: 'file',
						header: {
							contentType: config.contentType,
							appType: 'store',
							uniacid: uni.getStorageSync('uniacid'),
							storeId: uni.getStorageSync('storeId'),
							Authorization: `Bearer ${uni.getStorageSync('token')}`,
						},
						success: (res) => {
							let r = JSON.parse(res.data)
							if (r && r.code == 400) {
								uni.showToast({
									title: r.msg || r.code,
									icon: 'none',
									duration: 2000
								})
							} else {
								setTimeout(() => {
									let d = JSON.parse(res.data)
									resolve(d.data)
								}, 500)
							}
						}
					});
				})
			},
			async getGoodsLabelList() {
				const {
					data: {
						list
					}
				} = await this.beg.request({
					url: this.api.materialCatList,
					data: {
						pageNo: 1,
						pageSize: 999
					}
				})
				this.labelList = list.map(v => ({
					text: v.name,
					value: v.id
				}))
			},
			close() {
				this.form = {
					sort: 1,
					name: '',
					catId: '',
					image: '',
					price: '',
					inventory: '',
					autoReplenish: 1,
				}
				this.fileList1 = []
				this.show = false
			},
			async save() {
				if (!this.form.name) {
					return uni.showToast({
						title: '请输入名称',
						icon: 'none'
					})
				}
				if (!this.form.catId) {
					return uni.showToast({
						title: '请选择所属分类',
						icon: 'none'
					})
				}
				if (!this.form.price) {
					return uni.showToast({
						title: '请输入初始价格',
						icon: 'none'
					})
				}
				if (!this.form.inventory) {
					return uni.showToast({
						title: '请输入初始库存',
						icon: 'none'
					})
				}
				if (this.fileList1.length) {
					this.form.image = ''
					this.fileList1.forEach(v => {
						this.form.image = v.url
					})
				} else {
					this.form.image = ''
				}
				this.form.storeId = this.storeId
				const {
					msg
				} = await this.beg.request({
					url: this.form.id ? `${this.api.materialList}/${this.form.id}` : this.api.materialList,
					method: this.form.id ? 'PUT' : 'POST',
					data: this.form
				})
				uni.showToast({
					title: msg,
					icon: 'none'
				})
				this.close()
				this.$emit('save')
			}
		},
	}
</script>

<style lang="scss" scoped>
	.left {
		width: 140rpx;
		text-align: right;
	}
</style>